/**
 * @author:linjiye
 * @date: 2024/12/25
 * @desc:
 **/

import {
    Animated,
    FlatList,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    Image,
    Dimensions,
    ActivityIndicator
} from 'react-native'
import React, {useEffect, useRef, useState} from 'react'
import {useRouter} from "expo-router";
import PageScrollView from "@/components/PageScrollView";
import PageTabBar from "@/components/PageTabBar";
import FcButton from "@/components/FcButton";
import FcModal from "@/components/FcModal";
import FcTextInput from "@/components/FcTextInput";
import FormTitle from "@/components/FormTitle";
import FcBtnScrollTab from "@/components/FcBtnScrollTab";
import KeywordHighlighter from "@/components/KeywordHighlighter";
import NoData from "@/components/NoData";
import {Flex, Toast} from "@ant-design/react-native";
import {
    useAddKeywordGroupMutation,
    useAddKeywordMutation,
    useDeleteKeywordGroupMutation, useDeleteKeywordMutation,
    useEditKeywordGroupMutation,
    useEditKeywordMutation, useGetListQuery, useGroupingKeywordMutation,
    useMmObserveTargetListQuery,
    useQueryListByUserQuery
} from "@/store/api/keywordExplosion/keywordExplosionApi";
import Loading from "@/components/Loading";
import {set_pageRouterParams} from "@/store/reducer/aiFeeding/aiFeedingSlice";
import {useDispatch, useSelector} from "react-redux";
import {getTimeRange} from "@/utils";
import {useDownloadFromUrlMutation, useRecognizeMutation} from "@/store/api/aiInnovation/aiInnovationApi";
import {set_videoData} from "@/store/reducer/keywordExplosion/keywordExplosionSlice";
import FcSearch from "@/components/FcSearch";

type Props = {}

const screenHeight = Dimensions.get('window').height;

const index = (props: Props) => {
    const router = useRouter();
    const dispatch = useDispatch();
    let p = useSelector(state => state.aiFeeding.pageRouterParams)
    const [pageTabH, setPageTabH] = useState(0)
    const [typeList, setTypeList] = useState([
        {
            title: '关键词找爆款',
            id: 1,
        }, {
            title: '对标账号找爆款',
            id: 2
        }
    ])
    const [showType, setShowType] = useState(false)
    const [addKeyword, setAddKeyword] = useState(false)
    const [editKeyword, setEditKeyword] = useState(false)
    const [editKeywordList, setEditKeywordList] = useState(false)
    const [showKeywordList, setShowKeywordList] = useState(false)
    const [keyword, setKeyword] = useState('')
    const [searchText, setSearchText] = useState('')
    const [tabList, setTabList] = useState([

    ])

    const [list,setList] = useState([])

    const [showTJ,setShowTJ] = useState(false)

    const [sortList, setSortList] = useState([
        {
            name: '发布时间',
            id: 1,
            type: 'itemCreateTime'
        }, {
            name: '更新日期',
            id: 2,
            type: 'createTime'
        }, {
            name: '视频时长',
            id: 3,
            type: 'duration'
        }, {
            name: '评论数量',
            id: 4,
            type: 'commentCount'
        }, {
            name: '点赞数量',
            id: 5,
            type: 'diggCount'
        }, {
            name: '分享数量',
            id: 6,
            type: 'shareCount'
        }
    ])
    const [sortId, setSortId] = useState(1)
    const [timeList, setTimeList] = useState([
        {
            name: '全部',
            id: 1,
            type: ''
        }, {
            name: '近1天',
            id: 2,
            type: 'oneDay'
        }, {
            name: '近3天',
            id: 3,
            type: 'threeDay'
        }, {
            name: '近7天',
            id: 4,
            type: 'sevenDay'
        }, {
            name: '1个月',
            id: 5,
            type:'oneMonth'
        }, {
            name: '近半年',
            id: 6,
            type:'sixMonth'
        }, {
            name: '近1年',
            id: 7,
            type:'oneYear'
        }
    ])
    const [timeId, setTimeId] = useState(1)
    const [isAscendingOrder, setIsAscendingOrder] = useState(true)
    
    const [showGroupList, setShowGroupList] = useState(false)

    const fadeAnim1 = useRef(new Animated.Value(0)).current;  // 初始透明度为0
    const fadeAnim2 = useRef(new Animated.Value(1)).current;  // 初始透明度为0

    const [pressedIndex, setPressedIndex] = useState(-1);
    const [isAdd, setIsAdd] = useState(false)
    const [isEdit, setIsEdit] = useState(false)
    const [groupName, setGroupName] = useState('')
    const [groupId, setGroupId] = useState('')
    const [currentItem, setCurrentItem] = useState({})
    const [keywordCurrentItem, setKeywordCurrentItem] = useState({})
    const [selectData, setSelectData] = useState([])
    const [isDelete, setIsDelete] = useState(false)
    const [editGroup,setEditGroup] = useState(false)
    const [groupList,setGroupList] = useState([])
    const [groupList1,setGroupList1] = useState([])
    const [groupIndex,setGroupIndex] = useState(0)
    const [keywordList,setKeywordList] = useState([])
    const [keywordList1,setKeywordList1] = useState([])
    const [keywordIndex,setKeywordIndex] = useState(0)
    const [groupType,setGroupType] = useState('add')
    const [groupSelectItem,setGroupSelectItem] = useState({
        groupName: '',
    })
    const [keywordType,setKeywordType] = useState('add')
    const [keywordSelectItem,setKeywordSelectItem] = useState({
        targetName: '',
    })
    const [deleteType,setDeleteType] = useState('group')
    const [listParams, setListParams] = useState({
        targetType: 2,
        targetId: '',
        title: '',
        itemCreateTime_begin: '',
        itemCreateTime_end:'',
        pageNo: 1,
        pageSize: 20,
        column: 'diggCount',
        order: isAscendingOrder?'asc':'desc'
    })
    const [listParams1, setListParams1] = useState({
        targetType: 2,
        targetId: '',
        title: '',
        itemCreateTime_begin: '',
        itemCreateTime_end:'',
        pageNo: 1,
        pageSize: 20,
        column: 'diggCount',
        order: isAscendingOrder?'asc':'desc'
    })

    const [groupSearchText, setGroupSearchText] = useState('')
    const [keywordSearchText, setKeywordSearchText] = useState('')

    const {data:groupListRes,isSuccess:groupSuccess,refetch:groupRefetch,isLoading} = useQueryListByUserQuery({
        targetType: 2,
        groupName: groupSearchText
    })
    const {data:keywordListRes,isSuccess:keywordSuccess,refetch:keywordRefetch} = useMmObserveTargetListQuery({
        targetType: 2,
        pageNo: 1,
        pageSize: 1000,
        groupId: groupId,
        targetName: keywordSearchText
    })
    const [addGroupFun] = useAddKeywordGroupMutation()
    const [editGroupFun] = useEditKeywordGroupMutation()
    const [deleteGroupFun] = useDeleteKeywordGroupMutation()
    const [addKeywordFun] = useAddKeywordMutation()
    const [editKeywordFun] = useEditKeywordMutation()
    const [deleteKeywordFun] = useDeleteKeywordMutation()
    const [groupingKeywordFun] = useGroupingKeywordMutation()
    const {data:listDataRef,isSuccess:listSuccess,refetch:listRefetch} = useGetListQuery(listParams)
    const [isMove, setIsMove] = useState(false)
    const [moveItem, setMoveItem] = useState({})

    const [downloadFromUrlFun] = useDownloadFromUrlMutation?.()
    const [recognizeFun] = useRecognizeMutation?.()

    useEffect(() => {
        listRefetch()
    }, [listParams]);

    useEffect(() => {
        if(groupListRes?.code === 200){
            const list = groupListRes?.result || []
            let newList = list.map((item, index) => {
                return {
                    ...item,
                    title: item.groupName+'('+item.count+')'
                }
            })
            let allCount = list.reduce((acc, { count = 0 }) => acc + count, 0)
            setGroupList([{
                id: '',
                title: `全部(${allCount})`
            }, ...newList])

            if(!groupSearchText){
                setGroupList1([{
                    id: '',
                    title: `全部(${allCount})`
                },...newList])
            }
        }
        if(keywordListRes?.code === 200){
            const list = keywordListRes?.result?.records || []
            const kArr = []
            list.forEach((item) => {
                kArr.push({
                    title: item.targetName,
                    isSelected: false,
                    ...item
                })
            })
            setKeywordList(kArr)
            if(!keywordSearchText) setKeywordList1(kArr)
        }

        if(listDataRef?.code === 200){
            const list = listDataRef?.result?.records || []
            setList(list)
            console.log(listDataRef,'listDataRef===>');
        }
    },[groupSuccess,groupListRes,keywordSuccess,keywordListRes,listSuccess,listDataRef])


    function openAddGroup(type:string,val:any){
        setGroupType(type)
        if (type === 'add') {
            setGroupSelectItem({
                groupName: '',
            })
        } else if (type === 'edit') {
            setGroupSelectItem(val)
        }
        setIsAdd(true)
    }

    function openAddKeyword(type:string,val:any){
        setKeywordType(type)
        if (type === 'add') {
            setKeywordSelectItem({
                targetName: '',
            })
        } else if (type === 'edit') {
            setKeywordSelectItem(val)
        }
        // setAddKeyword(true)
        setEditKeyword(true)
    }

    function handleAddGroup() {
        if (groupType === 'add'){
            addGroupFun({
                groupName: groupSelectItem.groupName,
                targetType: 2,
            }).then((res) => {
                if (res.data.code === 200) {
                    setIsAdd(false)
                    groupRefetch()
                    Toast.info('添加成功')
                }
            })
        } else if (groupType === 'edit') {
            editGroupFun({
                groupName: groupSelectItem.groupName,
                targetType: 2,
                id: groupSelectItem.id
            }).then((res) => {
                if(res.data.code === 200){
                    setIsAdd(false)
                    groupRefetch()
                    Toast.info('编辑成功')
                }
            })
        }

    }

    function handleAddKeyword() {
        if (keywordType === 'add'){
            addKeywordFun({
                groupName: '',
                targetType: 2,
                targetName: keywordSelectItem.targetName,
                targetValue: keywordSelectItem.targetName,
                sourcePlatform: 'douyin',
            }).then((res) => {
                if (res.data.code === 200) {
                    setAddKeyword(false)
                    keywordRefetch()
                    Toast.info('添加成功')
                }
            })
        } else if (keywordType === 'edit') {
            editKeywordFun({
                groupName: '',
                targetType: 2,
                targetName: keywordSelectItem.targetName,
                targetValue: keywordSelectItem.targetName,
                sourcePlatform: 'douyin',
                id: keywordSelectItem.id
            }).then((res) => {
                if(res.data.code === 200){
                    setAddKeyword(false)
                    keywordRefetch()
                    Toast.info('编辑成功')
                }
            })
        }

    }


    function getTabInfo({height}){
        setPageTabH(height)
    }

    const handleType = (val) => {
        switch (val.id){
            case 1:
                setShowType(false)
                break
            case 2:
                router.push('/benchmarkingAccount')
                setShowType(false)
        }
    }

    const handleSelectType = () => {
        Animated.sequence([
            Animated.timing(
                fadeAnim1,
                {
                    toValue: 1,
                    duration: 500,  // 淡入时间3秒
                }
            ),
            Animated.timing(
                fadeAnim2,
                {
                    toValue: 0,
                    duration: 500,  // 淡出时间3秒
                }
            ),
        ]).start(() => {
            // 动画完成后的回调函数
            console.log('动画已完成');
        });
        setShowType(!showType)
    }

    const openDelete = (type) => {
        setDeleteType(type)
        setIsDelete(true)
    }

    const handleDelete = () => {
        const ids = selectData.map(item => item.id).join(',');
        if(deleteType === 'group'){
            deleteGroupFun({
                ids
            }).then((res) => {
                if(res.data.code === 200){
                    setIsDelete(false)
                    setSelectData([])
                    groupRefetch()
                    Toast.info('删除成功')
                }
            })
        } else if (deleteType === 'keyword'){
            deleteKeywordFun({
                ids
            }).then((res) => {
                if(res.data.code === 200){
                    setIsDelete(false)
                    setSelectData([])
                    keywordRefetch()
                    Toast.info('删除成功')
                }
            })
        }
    }

    const handleDeleteKeyword = () => {
        setIsDelete(true)
    }

    function openMove() {
        setIsMove(true)
    }

    function handleMove() {
        const ids = selectData.map(item => item.id).join(',');
        groupingKeywordFun({
            groupId: moveItem.id,
            id: ids,
        }).then((res) => {
            if (res.data.code === 200) {
                setIsMove(false)
                groupRefetch()
                keywordRefetch()
                Toast.info('移动成功')
            }
        })
    }

    const handleSelectItem = (item, index,type) => {
        let newList = [],newSelectData = []
        if(type === 'group'){
            newList = [...groupList]
            newList[index].isSelected = !newList[index].isSelected
            newSelectData = newList?.filter(item => item.isSelected)
            setGroupList(newList)
        } else if(type === 'keyword'){
            newList = [...keywordList]
            newList[index].isSelected = !newList[index].isSelected
            newSelectData = newList?.filter(item => item.isSelected)
            setKeywordList(newList)
        }

        setSelectData(newSelectData)
    }



    const handleSelectKeywordItem = (item, index) => {
        let newList = [...tabList]
        newList[index].isSelected = !newList[index].isSelected

        let newSelectData = newList?.filter(item => item.isSelected)
        setTabList(newList)
        setSelectData(newSelectData)
    }

    const handleEditKeyword = (val) => {
        setKeywordCurrentItem(val)
        setEditKeyword(true)
    }

    function getVideoText(val) {
        Toast.show({
            icon: 'loading',
            content: '视频文案正在获取中...',
            duration: 0,
            mask: false,
        })
        downloadFromUrlFun({
            url: val.itemUrl,
        }).then(res => {
            if(res?.data?.code === 200) {
                let file = res.data?.result || ''
                recognizeFun({
                    file: file.replace('\\','%5c')
                }).then(r => {
                    console.log(r);
                    let d = r?.error?.data
                    // 去除多余字符，提取 JSON 字符串
                    let processedInput = d.replace(/^data:"/, '').replace(/"$/, '');
                    // 按行分割输入字符串
                    const lines = processedInput.split('\n');

                    const arr = []

                    for (const line of lines) {
                        if (line.trim() === '') continue;
                        // 提取 JSON 字符串
                        const jsonStr = line.replace('data:', '');
                        try {
                            // 解析 JSON 字符串
                            const data = JSON.parse(jsonStr);
                            // 打印文案
                            if (data.text) {
                                console.log('文案内容：', data.text);
                                arr.push(data.text)
                            }
                        } catch (error) {
                            console.error('解析 JSON 时出错:', error);
                        }
                    }

                    if(arr.length > 0){
                        let obj = {
                            ...val,
                            text: arr[0]
                        }
                        dispatch(set_videoData(obj))
                        Toast.removeAll()
                        Toast.show({
                            content: '视频文案获取成功',
                            duration: 3,
                            mask: false,
                        })
                        router.push('/keywordExplosion/result')
                    } else {
                        Toast.removeAll()
                        Toast.show({
                            content: '视频文案获取失败',
                            duration: 3,
                            mask: false,
                        })
                    }
                }).catch(err => {
                    console.log(err,'err===>');
                    Toast.removeAll()
                    Toast.show({
                        content: '视频文案获取失败',
                        duration: 3,
                        mask: false,
                    })
                })
            } else {
                Toast.removeAll()
                Toast.show({
                    content: '视频文案获取失败',
                    duration: 3,
                    mask: false,
                })
            }
        }).catch(err => {
            console.log(err,'err===>');
            Toast.removeAll()
            Toast.show({
                content: '视频文案获取失败',
                duration: 3,
                mask: false,
            })
        })
    }

    const renderOption = ({ item }) => (
        <TouchableOpacity activeOpacity={1} style={styles.list_wrap}>
            <Text  numberOfLines={2} ellipsizeMode="tail">
                <KeywordHighlighter
                    text={item.title}
                    keywords={searchText}
                    textStyle={styles.item_title}
                    textHeightLightStyle={{color: '#2856FF'}}
                />
            </Text>

            <Text style={styles.item_time}>发布时间：{item.itemCreateTime}</Text>
            <View style={styles.data_num_wrap}>
                <View style={styles.data_time}>
                    <Text style={styles.data_icon}>&#xe64c;</Text>
                    <Text style={styles.data_text}>00:02:56</Text>
                </View>
                <View style={styles.data_other}>
                    <View style={styles.data_num}>
                        <Text style={styles.data_icon}>&#xe63e;</Text>
                        <Text style={styles.data_text}>{item.commentCount}</Text>
                    </View>
                    <View style={styles.data_num}>
                        <Text style={styles.data_icon}>&#xe622;</Text>
                        <Text style={styles.data_text}>{item.diggCount}</Text>
                    </View>
                    <View style={styles.data_num}>
                        <Text style={styles.data_icon}>&#xe670;</Text>
                        <Text style={styles.data_text}>{item.shareCount}</Text>
                    </View>
                </View>
            </View>
            <View style={styles.douYin_wrap}>
                <Image style={styles.douYin_icon} source={require('@/assets/images/douyin.png')} resizeMode={'contain'}></Image>
                <View style={styles.douYin_content}>
                    <Text style={styles.douYin_content_title}>[{item.nickname}]</Text>
                    <Text style={styles.douYin_content_time}>系统获取时间：{item.createTime}</Text>
                </View>
            </View>
            <View style={styles.item_btn_wrap}>
                <TouchableOpacity style={[styles.item_btn,{marginRight: 8}]} onPress={() => router.push(item.itemUrl)}>
                    <Text>查看出处</Text>
                </TouchableOpacity>
                <View style={[styles.item_btn]}>
                    <FcButton
                        onClick={() => getVideoText(item)}
                        type='txtBK'
                        style={styles.item_btn1}
                        itemStyle={{width: '100%', height: '100%'}}
                        textName='获取视频文案' fontSize={15} borderWidth={1}></FcButton>
                </View>
            </View>
        </TouchableOpacity>
    );

    function handleSelectGroupItem(item) {
        
    }

    const handleGroupClickTab = (val,index: number) => {
        console.log(val,index);
        setGroupIndex(index)
        setGroupId(val.id)
        setKeywordList([])
        keywordRefetch()
    }

    const handleKeywordClickTab = (val,index: number) => {
        console.log(val,index);
        setKeywordIndex(index)
        setListParams({
            ...listParams,
            targetId: val.id,
        })
        listRefetch()
    }

    // function takeSearch() {
    //     router.push('/search')
    //     dispatch(set_pageRouterParams({
    //         pathname: `/keywordExplosion`,
    //         pageName: 'keywordExplosion',
    //         searchList: [],
    //         params: {
    //             ...listParams
    //         },
    //     }))
    // }

    function handleVisibleRange(item: any) {
        editGroupFun({
            id: item.id,
            visibleRange: item.visibleRange == 1 ? 0 : 1
        }).then((res) => {
            if(res.data.code === 200){
                Toast.show({
                    content: item.visibleRange == 1 ? '关键词已设置\n为所有人可见' : '关键词已设置\n为仅自己可见',
                    icon: <Text style={{fontFamily: 'FcIconFont',fontSize: 48,color: 'white',marginBottom: 12}}>&#xe66c;</Text>,
                })
            }
        })
    }

    function handleSelectSortType(val) {
        setSortId(val.id)
        let obj = {
            ...listParams,
            column: val.type
        }
        setListParams1(obj)
    }

    function handleSelectTimeType(val) {
        setTimeId(val.id)
        let d = {
            start: '',
            end: ''
        }
        if(val.type){
            d = getTimeRange(val.type)
        }
        console.log(d);
        let obj = {
            ...listParams,
            itemCreateTime_begin: d.start,
            itemCreateTime_end: d.end
        }
        setListParams1(obj)
    }

    function handleSelectSortOrder(isAscendingOrder: boolean) {
        let obj = {
            ...listParams,
            order: !isAscendingOrder?'asc':'desc'
        }
        setIsAscendingOrder(!isAscendingOrder)
        setListParams1(obj)
    }

    function handleSureSelect() {
        setListParams(listParams1)
        setShowTJ(false)
    }

    function handleResetSelect() {
        let obj = {
            ...listParams,
            itemCreateTime_begin: '',
            itemCreateTime_end:'',
            column: 'diggCount',
            order: isAscendingOrder?'asc':'desc'
        }
        setSortId(1)
        setTimeId(1)
        setIsAscendingOrder(true)
        setListParams1(obj)
        setListParams(obj)
        setShowTJ(false)
    }

    function handleSearch(val: ((prevState: string) => string) | string) {
        setSearchText(val)
        let obj = {
           ...listParams,
            title: val
        }
        setListParams(obj)
    }

    return (
        <PageScrollView
            getPageTabInfo={getTabInfo}
            bodyStyle={{paddingBottom: 0, paddingHorizontal: 0}}
            tabStyle={{backgroundColor: '#fff'}}
            pageTab={

                <PageTabBar
                    style={{marginVertical: 10}}
                    content={
                        <TouchableOpacity style={styles.title_wrap} onPress={() => handleSelectType()}>
                            <Text style={styles.title_wrap}>关键词找爆款</Text>
                            {showType && <Text style={{
                                fontFamily: 'FcIconFont',
                                fontSize: 20,
                                color: 'rgba(0,0,0,0.9)'
                            }}>&#xe625;</Text>}
                            {!showType && <Text style={{
                                fontFamily: 'FcIconFont',
                                fontSize: 20,
                                color: 'rgba(0,0,0,0.9)'
                            }}>&#xe647;</Text>}
                        </TouchableOpacity>
                    }
                    right={
                        <TouchableOpacity style={styles.add_key_warp} onPress={() => setAddKeyword(true)}>
                            <Text style={{
                                fontFamily: 'FcIconFont',
                                fontSize: 24,
                                color: 'rgba(0,0,0,0.9)'
                            }}>&#xe645;</Text>
                            <Text style={styles.add_key}>添加关键词</Text>
                        </TouchableOpacity>
                    }
                />
            }
            pageHeader={
                <>
                    {
                        (groupList?.length> 0 || keywordList?.length>0) &&
                        <View>
                            <View style={{backgroundColor: '#fff',paddingBottom: 16}}>
                                <FcBtnScrollTab style={{marginLeft: -6,borderBottomColor: 'rgba(0,0,0,0.1)',paddingRight: 16}} tabList={groupList1} tabIndex={groupIndex} styType={'sty2'} onClickMenuMore={() => setShowGroupList(true)} onTabClick={handleGroupClickTab}/>
                                <FormTitle style={{paddingHorizontal: 16}} title='监控中的关键词' titleStyle={{color: 'rgba(0, 0, 0, 0.5)'}}/>
                                <FcBtnScrollTab style={{marginLeft: -6,marginBottom: 16,paddingRight: 16}} tabList={keywordList1} tabIndex={keywordIndex} onClickMenuMore={() => setShowKeywordList(true)} onTabClick={handleKeywordClickTab}/>
                            </View>
                            <View style={styles.search_wrap}>
                                <View style={{flex: 1}}>
                                    <FcTextInput type='search' text={searchText} placeholder={'请输入要搜索的内容'}
                                                 onChangeText={(val) => handleSearch(val)}
                                                 bodyStyle={{backgroundColor: 'white'}}
                                                 height={40}/>
                                </View>

                                <TouchableOpacity style={styles.tj_btn_wrap} onPress={() => setShowTJ(true)}>
                                    <Text style={styles.tj_btn}>&#xe621;</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    }
                </>
            }
            pageModal={
                <>
                    {showType &&
                        <Animated.View style={[styles.modal_wrap, {opacity: showType ? fadeAnim1 : fadeAnim2,height: screenHeight - pageTabH}]}>
                            <Animated.View style={styles.modal}></Animated.View>
                            <Animated.View style={styles.modal_content}>
                                {typeList?.map((item, index) =>
                                    <TouchableOpacity style={styles.type_item} key={index} onPress={() => handleType(item)}>
                                        <Text>{item.title}</Text>
                                    </TouchableOpacity>
                                )}
                            </Animated.View>
                        </Animated.View>
                    }
                </>
            }
        >
            <View style={styles.container}>
                {/*<KeywordList />*/}
                {
                    list.length>0 && (groupList?.length> 0 || keywordList?.length>0) &&
                    <FlatList
                        data={list}
                        renderItem={renderOption}
                        keyExtractor={(_, index) => `list_item${index}`}
                    />
                }

                {list.length<=0 && (groupList?.length> 0 || keywordList?.length>0) &&
                    <View style={{marginHorizontal:'20%'}}>
                        <NoData  hintText='目前没有数据，AI正在获取，请等待！再次点击监控账号刷新获取列表。'/>
                    </View>
                }
                {!(groupList?.length> 0 || keywordList?.length>0) &&
                    <View style={{
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        paddingTop: 120,
                        paddingBottom: 120
                    }}>
                        <NoData  hintText='暂无数据'/>
                        <FcButton
                            onClick={() => setAddKeyword(true)}
                            type='BjJB'
                            colors={['#6989FF', '#C65EFD']}
                            style={{width: 94, height: 32, justifyContent: 'center'}}
                            itemStyle={{borderRadius: 8}}
                            textName='添加关键词'></FcButton>
                    </View>
                }
                {/*{!isLoading &&*/}
                {/*    <View style={{width: '100%',height:'100%'}}>*/}
                {/*        <Loading style={{backgroundColor: 'transparent',width: '10%',height:'10%'}}/>*/}
                {/*   </View>*/}
                {/*}*/}

                {/*{showType &&*/}
                {/*    <Animated.View style={[styles.modal_wrap, {opacity: showType ? fadeAnim1 : fadeAnim2}]}>*/}
                {/*        <Animated.View style={styles.modal}></Animated.View>*/}
                {/*        <Animated.View style={styles.modal_content}>*/}
                {/*            {typeList?.map((item, index) =>*/}
                {/*                <TouchableOpacity style={styles.type_item} key={index} onPress={() => handleType(item)}>*/}
                {/*                    <Text>{item.title}</Text>*/}
                {/*                </TouchableOpacity>*/}
                {/*            )}*/}
                {/*        </Animated.View>*/}
                {/*    </Animated.View>*/}
                {/*}*/}
            </View>



            <FcModal
                isOpen={showTJ}
                onFcModalClose={() => setShowTJ(false)}
                titleText='视频作品筛选'
                bottom={
                    <View style={[styles.bottom_btn,{justifyContent: "space-between"}]}>
                        <View style={{flex: 1, marginRight: 4}}>
                            <FcButton
                                onClick={() => handleResetSelect()}
                                type='default'
                                style={{
                                    width: '100%',
                                    height: 40,
                                    justifyContent: 'center',
                                    backgroundColor: '#F1F2F4',
                                    borderRadius: 8
                                }}
                                itemStyle={{fontSize: 15}}
                                textName='重置'/>
                        </View>
                        <View style={{flex: 1, marginLeft: 4}}>
                            <FcButton
                                onClick={() => handleSureSelect()}
                                type='BjJB'
                                colors={['#6989FF', '#C65EFD']}
                                style={{width: '100%', height: 40, justifyContent: 'center'}}
                                itemStyle={{borderRadius: 8, fontSize: 15}}
                                textName='确认'/>
                        </View>
                    </View>
                }
            >
                <View style={{paddingHorizontal: 8,paddingVertical: 16}}>
                    <FormTitle style={{paddingHorizontal: 8}} isLeftIcon title='视频排序' right={
                        <TouchableOpacity style={styles.px_type} onPress={() => handleSelectSortOrder(isAscendingOrder)}>
                            {isAscendingOrder && <Text style={{fontFamily: 'FcIconFont',fontSize: 16,color: '#2856FF',marginRight: 3}}>&#xe616;</Text>}
                            {!isAscendingOrder && <Text style={{fontFamily: 'FcIconFont',fontSize: 16,color: '#2856FF',marginRight: 3}}>&#xe634;</Text>}
                            <Text style={{fontSize:14,color:'#2856FF'}}>{isAscendingOrder?'升序':'降序'}</Text>
                        </TouchableOpacity>
                    }/>
                    <Flex wrap='wrap' style={styles.type_menu}>
                        {sortList?.map((item, index) =>
                            <View key={index} style={[styles.type_menu_item_box]}>
                                <FcButton
                                    onClick={() => handleSelectSortType(item)}
                                    type={sortId === item.id ? 'txtBK' : 'default'}
                                    style={[styles.type_menu_item]}
                                    itemStyle={{width: '100%', height: '100%'}}
                                    textName={item.name} borderWidth={1}></FcButton>
                            </View>
                        )}
                    </Flex>
                    <FormTitle style={{paddingHorizontal: 8}} isLeftIcon title='发布时间' />
                    <Flex wrap='wrap' style={styles.type_menu}>
                        {timeList?.map((item, index) =>
                            <View key={index} style={[styles.type_menu_item_box]}>
                                <FcButton
                                    onClick={() => handleSelectTimeType(item)}
                                    type={timeId === item.id ? 'txtBK' : 'default'}
                                    style={[styles.type_menu_item]}
                                    itemStyle={{width: '100%', height: '100%'}}
                                    textName={item.name} borderWidth={1}></FcButton>
                            </View>
                        )}
                    </Flex>
                </View>
            </FcModal>

            <FcModal
                isOpen={showGroupList}
                onFcModalClose={() => {
                    setShowGroupList(false)
                    setGroupSearchText('')
                }}
                titleText='分组列表'
                titleRight={
                    <View style={styles.module_btn_wrap}>
                        <TouchableOpacity style={styles.module_btn} onPress={() => {
                            setIsEdit(true)
                            setGroupSearchText('')
                        }}>
                            <Text style={styles.module_btn_txt}>编辑</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.module_btn} onPress={() => openAddGroup('add',null)}>
                            <Text style={styles.module_btn_txt}>新增分组</Text>
                        </TouchableOpacity>
                    </View>
                }
                header={<FcSearch style={{marginVertical: 16}} searchText={groupSearchText} onSearch={(val) => setGroupSearchText(val)}/>}
            >
                <View style={{marginTop: -19.5}}>

                    {/*<TouchableOpacity*/}
                    {/*                  activeOpacity={1}*/}
                    {/*                  style={[styles.modal_item_text, pressedIndex === index && styles.modal_item_pressed]}*/}
                    {/*>*/}
                    {/*    <Text numberOfLines={1} ellipsizeMode="tail">全部分组</Text>*/}
                    {/*</TouchableOpacity>*/}
                    {groupList.map((item, index) => (
                        <TouchableOpacity key={index}
                                          activeOpacity={1}
                                          style={[styles.modal_item_text, pressedIndex === index && styles.modal_item_pressed]}
                                          onPress={() => {
                                              handleGroupClickTab(item,index)
                                              setShowGroupList(false)
                                          }}
                                          onPressIn={() => setPressedIndex(index)}
                                          onPressOut={() => setPressedIndex(-1)}
                        >
                            <Text numberOfLines={1} ellipsizeMode="tail">
                                <KeywordHighlighter
                                    text={item.title}
                                    keywords={groupSearchText}
                                    textStyle={{color: 'rgba(0, 0, 0, 0.9)', fontSize: 15}}
                                    textHeightLightStyle={{color: '#2856FF'}}
                                />
                            </Text>
                        </TouchableOpacity>
                    ))}

                    {groupList?.length <= 1 &&
                        <View style={{
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingTop: 60,
                            paddingBottom: 120
                        }}>
                            <NoData hintText='暂无分组'/>
                            <TouchableOpacity onPress={() => setIsAdd(true)}>
                                <FcButton
                                    type='BjJB'
                                    colors={['#6989FF', '#C65EFD']}
                                    style={{width: 74, height: 32, justifyContent: 'center'}}
                                    itemStyle={{borderRadius: 8}}
                                    textName='去新增'></FcButton>
                            </TouchableOpacity>
                        </View>
                    }
                </View>
            </FcModal>
            <FcModal
                isOpen={showKeywordList}
                onFcModalClose={() => {
                    setShowKeywordList(false)
                    setKeywordSearchText('')
                }}
                titleText='关键词'
                titleRight={
                    <View style={styles.module_btn_wrap}>
                        <TouchableOpacity style={styles.module_btn} onPress={() => {
                            setEditKeywordList(true)
                            setKeywordSearchText('')
                        }}>
                            <Text style={styles.module_btn_txt}>编辑</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.module_btn} onPress={() => openAddKeyword('add',null)}>
                            <Text style={styles.module_btn_txt}>新增关键词</Text>
                        </TouchableOpacity>
                    </View>
                }
                header={<FcSearch style={{marginVertical: 16}} searchText={keywordSearchText} onSearch={(val) => setKeywordSearchText(val)}/>}
            >
                <View style={{marginTop: -19.5}}>

                    <TouchableOpacity
                                      activeOpacity={1}
                                      style={[styles.modal_item_text]}
                    >
                        <Text numberOfLines={1} ellipsizeMode="tail">全部关键词</Text>
                    </TouchableOpacity>
                    {keywordList.map((item, index) => (
                        <TouchableOpacity key={index}
                                          activeOpacity={1}
                                          style={[styles.modal_item_text, pressedIndex === index && styles.modal_item_pressed]}
                                          onPress={() => {
                                              handleKeywordClickTab(item,index)
                                              setShowKeywordList(false)
                                          }}
                                          onPressIn={() => setPressedIndex(index)}
                                          onPressOut={() => setPressedIndex(-1)}
                        >
                            <Text numberOfLines={1} ellipsizeMode="tail">
                                <KeywordHighlighter
                                    text={item.title}
                                    keywords={keywordSearchText}
                                    textStyle={{color: 'rgba(0, 0, 0, 0.9)', fontSize: 15}}
                                    textHeightLightStyle={{color: '#2856FF'}}
                                />
                            </Text>
                        </TouchableOpacity>
                    ))}

                    {keywordList?.length <= 0 &&
                        <View style={{
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingTop: 60,
                            paddingBottom: 120
                        }}>
                            <NoData hintText='暂无关键词'/>
                            <TouchableOpacity onPress={() => setEditKeyword(true)}>
                                <FcButton
                                    type='BjJB'
                                    colors={['#6989FF', '#C65EFD']}
                                    style={{width: 74, height: 32, justifyContent: 'center'}}
                                    itemStyle={{borderRadius: 8}}
                                    textName='去新增'></FcButton>
                            </TouchableOpacity>
                        </View>
                    }
                </View>
            </FcModal>
            <FcModal
                isOpen={isEdit}
                onFcModalClose={() => {
                    setIsEdit(false)
                    setGroupSearchText('')
                }}
                titleText='分组列表'
                titleRight={
                    <FcButton
                        onClick={() => setIsEdit(false)}
                        type='BjJB'
                        colors={['#6989FF', '#C65EFD']}
                        style={{width: 48, height: 28, justifyContent: 'center'}}
                        itemStyle={{borderRadius: 8, fontSize: 12}}
                        textName='完成'/>
                }
                header={<FcSearch style={{marginVertical: 16}} searchText={groupSearchText} onSearch={(val) => setGroupSearchText(val)}/>}
                titleBottomBorderWidth={0}
                bottom={
                    <View style={styles.page_bottom}>
                        <Text style={styles.delete_num}>已选 {selectData?.length} 个</Text>
                        <TouchableOpacity style={styles.delete_btn} onPress={() => openDelete('group')}>
                            <Text style={{
                                fontFamily: 'FcIconFont',
                                fontSize: 20,
                                color: selectData?.length>0 ? 'rgba(250,81,81,1)' : 'rgba(250,81,81,.3)'
                            }}>&#xe61d;</Text>
                            <Text
                                style={[styles.delete_text, selectData?.length>0 && styles.delete_active]}>删除</Text>
                        </TouchableOpacity>
                    </View>
                }
            >
                <View style={{marginTop: -19.5}}>
                    {groupList.map((item, index) => (
                        <TouchableOpacity key={index}
                                          activeOpacity={1}
                                          style={[styles.modal_item_text, styles.item_wrap,pressedIndex === index && styles.modal_item_pressed]}
                                          onPressIn={() => setPressedIndex(index)}
                                          onPressOut={() => setPressedIndex(-1)}
                        >
                            <View style={styles.item_left}>
                                {
                                    index !== 0 &&
                                    <TouchableOpacity style={[styles.select_icon, item.isSelected && styles.select_active]}
                                                      onPress={() => handleSelectItem(item, index,'group')}>
                                        {item.isSelected && <Text
                                            style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe64d;</Text>}
                                    </TouchableOpacity>
                                }
                                <Text numberOfLines={1} ellipsizeMode="tail">
                                    <KeywordHighlighter
                                        text={item.title}
                                        keywords={groupSearchText}
                                        textStyle={{color: 'rgba(0, 0, 0, 0.9)', fontSize: 15}}
                                        textHeightLightStyle={{color: '#2856FF'}}
                                    />
                                </Text>
                            </View>
                            {
                                index !== 0 &&
                                <View style={styles.item_right}>
                                    {item.visibleRange === 1 &&
                                        <TouchableOpacity onPress={() => handleVisibleRange(item)}>
                                            <Text style={{
                                                fontFamily: 'FcIconFont',
                                                fontSize: 20,
                                                color: 'rgba(0,0,0,0.5)'
                                            }}>&#xe67d;</Text>
                                        </TouchableOpacity>
                                    }
                                    {item.visibleRange === 0 &&
                                        <TouchableOpacity onPress={() => handleVisibleRange(item)}>
                                            <Text style={{
                                                fontFamily: 'FcIconFont',
                                                fontSize: 20,
                                                color: 'rgba(0,0,0,0.5)'
                                            }}>&#xe67c;</Text>
                                        </TouchableOpacity>
                                    }
                                    <TouchableOpacity onPress={() => openAddGroup('edit',item)}>
                                        <Text style={{
                                            fontFamily: 'FcIconFont',
                                            fontSize: 20,
                                            color: 'rgba(0,0,0,0.5)',
                                            marginHorizontal: 20
                                        }}>&#xe630;</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity>
                                        <Text style={{
                                            fontFamily: 'FcIconFont',
                                            fontSize: 20,
                                            color: 'rgba(0,0,0,0.5)',
                                        }}>&#xe633;</Text>
                                    </TouchableOpacity>
                                </View>
                            }
                        </TouchableOpacity>
                    ))}
                    {groupList?.length <= 1 &&
                        <View style={{
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center',
                            paddingTop: 60,
                            paddingBottom: 120
                        }}>
                            <NoData hintText='暂无分组'/>
                            <TouchableOpacity onPress={() => setIsAdd(true)}>
                                <FcButton
                                    type='BjJB'
                                    colors={['#6989FF', '#C65EFD']}
                                    style={{width: 74, height: 32, justifyContent: 'center'}}
                                    itemStyle={{borderRadius: 8}}
                                    textName='去新增'></FcButton>
                            </TouchableOpacity>
                        </View>
                    }
                </View>
            </FcModal>
            <FcModal
                isOpen={editKeywordList}
                onFcModalClose={() => {
                    setEditKeywordList(false)
                    setKeywordSearchText('')
                }}
                titleText='关键词'
                closeShow={false}
                titleLeft={
                    <Flex>
                        <TouchableOpacity onPress={() => setEditKeywordList(false)}>
                            <Text style={{fontFamily: 'FcIconFont', color: '#000', fontSize: 24}}>&#xe659;</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {setEditKeywordList(false); setShowKeywordList(false)}}>
                            <Text style={{fontFamily: 'FcIconFont', color: '#000', fontSize: 24, marginLeft: 20}}>&#xe66a;</Text>
                        </TouchableOpacity>
                    </Flex>
                }
                header={<FcSearch style={{marginVertical: 16}} searchText={keywordSearchText} onSearch={(val) => setKeywordSearchText(val)}/>}
                bottom={
                    <Flex justify='between' style={styles.page_bottom}>
                        <Text style={styles.delete_num}>已选 {selectData?.length} 个</Text>

                        <TouchableOpacity style={[styles.delete_btn1]}
                                            onPress={() => openMove()}>
                            <Text style={{
                                fontFamily: 'FcIconFont',
                                fontSize: 20,
                                color: selectData?.length > 0 ? 'rgba(0, 0, 0, 0.9)' : 'rgba(0, 0, 0,.3)'
                            }}>&#xe631;</Text>
                            <Text
                                style={[styles.delete_text, {color: selectData?.length > 0 ? 'rgba(0, 0, 0, 0.9)' : 'rgba(0, 0, 0, 0.3)'}]}>移动</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.delete_btn1} onPress={() => openDelete('keyword')}>
                            <Text style={{
                                fontFamily: 'FcIconFont',
                                fontSize: 18,
                                color: selectData?.length>0 ? 'rgba(250,81,81,1)' : 'rgba(250,81,81,.3)'
                            }}>&#xe61d;</Text>
                            <Text
                                style={[styles.delete_text, selectData?.length>0 && styles.delete_active]}>删除</Text>
                        </TouchableOpacity>
                        <FcButton
                            onClick={() => setEditKeywordList(false)}
                            type='BjJB'
                            colors={['#6989FF', '#C65EFD']}
                            style={{width: 72, height: 28, justifyContent: 'center'}}
                            itemStyle={{borderRadius: 8, fontSize: 12}}
                            textName='完成设置'/>
      
                    </Flex>
                }
            >
                <View style={{marginTop: -19.5}}>

                    <TouchableOpacity
                                      activeOpacity={1}
                                      style={[styles.modal_item_text]}
                    >
                        <Text numberOfLines={1} ellipsizeMode="tail">全部关键词</Text>
                    </TouchableOpacity>
                    {keywordList.map((item, index) => (
                        <TouchableOpacity key={index}
                                          activeOpacity={1}
                                          style={[styles.modal_item_text, styles.item_wrap,pressedIndex === index && styles.modal_item_pressed]}
                                          onPressIn={() => setPressedIndex(index)}
                                          onPressOut={() => setPressedIndex(-1)}
                        >
                            <View style={styles.item_left}>
                                <TouchableOpacity style={[styles.select_icon, item.isSelected && styles.select_active]}
                                                  onPress={() => handleSelectItem(item, index,'keyword')}>
                                    {item.isSelected && <Text
                                        style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe64d;</Text>}
                                </TouchableOpacity>
                                <Text numberOfLines={1} ellipsizeMode="tail">
                                    <KeywordHighlighter
                                        text={item.title}
                                        keywords={keywordSearchText}
                                        textStyle={{color: 'rgba(0, 0, 0, 0.9)', fontSize: 15}}
                                        textHeightLightStyle={{color: '#2856FF'}}
                                    />
                                </Text>
                            </View>
                            <View style={styles.item_right}>
                                {/*<TouchableOpacity onPress={() => openAddKeyword('edit',item)}>*/}
                                {/*    <Text style={{*/}
                                {/*        fontFamily: 'FcIconFont',*/}
                                {/*        fontSize: 20,*/}
                                {/*        color: 'rgba(0,0,0,0.5)'*/}
                                {/*    }}>&#xe630;</Text>*/}
                                {/*</TouchableOpacity>*/}
                                <TouchableOpacity>
                                    <Text style={{
                                        fontFamily: 'FcIconFont',
                                        fontSize: 20,
                                        color: 'rgba(0,0,0,0.5)',
                                        marginLeft: 20
                                    }}>&#xe633;</Text>
                                </TouchableOpacity>
                            </View>
                        </TouchableOpacity>
                    ))}

                    {keywordList?.length <= 0 && <NoData hintText={'暂无数据'}/>}
                </View>
            </FcModal>
            <FcModal
                isOpen={isAdd}
                transparent
                closeShow={false}
                animationType='fade'
                onFcModalClose={() => setIsAdd(false)}
                style={styles.modal_default}
                titleText={groupType==='add'?'新增分组':'编辑分组'}
                titleBottomBorderWidth={0}
                footer={[
                    {
                        text: '取消',
                        onPress: () => setIsAdd(false),
                        style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },
                    },
                    {
                        text: '确认',
                        onPress: () => handleAddGroup(),
                        style: { color: '#2856FF',fontSize: 17 },
                    },
                ]}
            >
                <View style={{paddingBottom: 20}}>
                    <FcTextInput text={groupSelectItem.groupName} placeholder={'请输入分组名称'}
                                 onChangeText={(val) => setGroupSelectItem({...groupSelectItem,groupName: val})}
                                 height={56}/>
                </View>
            </FcModal>
            <FcModal
                isOpen={isDelete}
                transparent
                closeShow={false}
                animationType='fade'
                onFcModalClose={() => setIsDelete(false)}
                style={styles.modal_default}
                titleText={'确认要删除吗？'}
                titleBottomBorderWidth={0}
                footer={[
                    {
                        text: '取消',
                        onPress: () => setIsDelete(false),
                        style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },
                    },
                    {
                        text: '确认',
                        onPress: () => handleDelete(),
                        style: { color: '#2856FF',fontSize: 17 },
                    },
                ]}
            >
                <Text style={{textAlign:'center',color: 'rgba(0,0,0,0.5)'}}>一旦删除，当前分组将被删除哦~</Text>
            </FcModal>
            <FcModal
                isOpen={editGroup}
                transparent
                closeShow={false}
                animationType='fade'
                onFcModalClose={() => setEditGroup(false)}
                style={styles.modal_default}
                titleText={'编辑分组'}
                titleBottomBorderWidth={0}
                footer={[
                    {
                        text: '取消',
                        onPress: () => setEditGroup(false),
                        style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },
                    },
                    {
                        text: '确认',
                        onPress: () => setEditGroup(false),
                        style: { color: '#2856FF',fontSize: 17 },
                    },
                ]}
            >
                <View style={{paddingBottom: 20}}>
                    <FcTextInput text={currentItem.title} placeholder={'请输入分组名称'}
                                 onChangeText={setSearchText}
                                 height={56}/>
                </View>
            </FcModal>
            <FcModal
                isOpen={editKeyword}
                transparent
                closeShow={false}
                animationType='fade'
                onFcModalClose={() => setEditKeyword(false)}
                style={styles.modal_default}
                titleText={keywordType==='add'?'新增关键词':'编辑关键词'}
                titleBottomBorderWidth={0}
                footer={[
                    {
                        text: '取消',
                        onPress: () => setEditKeyword(false),
                        style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },
                    },
                    {
                        text: '确认',
                        onPress: () => handleAddKeyword(),
                        style: { color: '#2856FF',fontSize: 17 },
                    },
                ]}
            >
                <View style={{paddingBottom: 20}}>
                    <FcTextInput multiline text={keywordSelectItem.title} placeholder={'请输入关键词名称'}
                                 onChangeText={(val) => setKeywordSelectItem({...keywordSelectItem,targetName: val})}
                                 height={82}/>
                </View>
            </FcModal>
            <FcModal
                isOpen={addKeyword}
                onFcModalClose={() => setAddKeyword(false)}
                titleText='添加关键词'
                titleDesc='获取关键词相关抖音综合热度较高的视频，每天更新'
                bottom={
                    <View style={styles.bottom_btn}>
                        <View style={{width: 168}}>
                            <FcButton
                                onClick={() => {
                                    setKeywordType('add')
                                    setAddKeyword(false)
                                    handleAddKeyword()
                                }}
                                disable={keywordSelectItem.title == ''}
                                type='BjJB'
                                colors={['#6989FF', '#C65EFD']}
                                style={{width: '100%', height: 40, justifyContent: 'center'}}
                                itemStyle={{borderRadius: 8, fontSize: 15}}
                                textName='提交'/>
                        </View>
                    </View>
                }
            >
                <FcTextInput multiline text={keywordSelectItem.title} placeholder={'请输入需要监控的关键词'} onChangeText={(val) => setKeywordSelectItem({...keywordSelectItem,targetName: val})}
                             style={{marginVertical: 16, marginHorizontal: 16}}
                             height={82}/>
            </FcModal>
            <FcModal
                isOpen={isMove}
                onFcModalClose={() => setIsMove(false)}
                titleText='移动至分组'
                bottom={
                    <View style={styles.move_bottom}>
                        <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}} onPress={() => openAddGroup('add',null)} >
                            <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: 'rgba(0,0,0,0.9)'}}>&#xe63a;</Text>
                            <Text style={{fontSize: 15, color: '#2856FF',marginLeft: 4}}>新增分组</Text>
                        </TouchableOpacity>
                        <FcButton
                            onClick={() => handleMove()}
                            type='BjJB'
                            colors={moveItem.id?['#6989FF', '#C65EFD']:['rgba(105,137,255,0.4)','rgba(198,94,253,0.4)']}
                            style={{width: 88, height: 32, justifyContent: 'center'}}
                            itemStyle={{borderRadius: 8, fontSize: 15}}
                            textName='移动至此'/>
                    </View>
                }
            >
                {groupList?.map((item, index) => (
                    <TouchableOpacity key={index}
                                      activeOpacity={1}
                                      style={[styles.modal_item_text, styles.item_wrap,pressedIndex === index && styles.modal_item_pressed]}
                                      onPressIn={() => setPressedIndex(index)}
                                      onPressOut={() => setPressedIndex(-1)}
                    >
                        <View style={styles.item_left}>
                            <TouchableOpacity style={[styles.select_icon, item.id === moveItem.id && styles.select_active]}
                                              onPress={() => setMoveItem(item)}>
                                {item.id === moveItem.id && <Text
                                    style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe64d;</Text>}
                            </TouchableOpacity>
                            <Text numberOfLines={1} ellipsizeMode="tail">{item.title}({item.count})</Text>
                        </View>
                    </TouchableOpacity>

                ))}

                {groupList?.length <= 0 && <NoData hintText={'暂无数据'}/>}
            </FcModal>
        </PageScrollView>
    )
}

export default index

const styles = StyleSheet.create({
    container: {},

    title_wrap: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        fontSize: 17,
        fontWeight: 600
    },

    modal_wrap: {
        width: '100%',
        height: '100%',
        position: "absolute",
        left: 0,
        bottom: 0,
        zIndex: 100
    },

    modal: {
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.5)',
        position: "absolute",
        left: 0,
        bottom: 0,
    },

    modal_content: {
        width: '100%',
        backgroundColor: 'white',
        position: "absolute",
        left: 0,
        top: 0,
        zIndex: 10,
        paddingHorizontal: 16
    },
    type_item: {
        height: 56,
        flexDirection: "row",
        alignItems: 'center',
        justifyContent: "center",
        fontSize: 17,
        color: 'rgba(0,0,0,0.9)'
    },
    add_key_warp: {
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center"
    },
    add_key: {
        color: 'rgba(0,0,0,0.3)',
        lineHeight: 14,
        fontSize: 10
    },

    bottom_btn: {
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: 16,
        height: 56,
        justifyContent: "center",
        backgroundColor: 'white',
    },
    btn_wrap: {
        flexDirection: "row",
        alignItems: "center",
        padding: 12,
        backgroundColor: 'white',
        marginBottom: 8,
        borderTopWidth: 0.5,
        borderTopColor: 'rgba(0, 0, 0, 0.1)',
    },
    btn: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: '#F1F2F4',
        borderRadius: 8,
        paddingHorizontal: 8,
        height: 28,
        marginRight: 8
    },

    search_wrap: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginVertical: 12,
        paddingHorizontal: 16
    },

    tj_btn_wrap: {
        width: 40,
        height: 40,
        display: 'flex',
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: 'white',
        borderRadius: 8,
        flexShrink: 0,
        marginLeft: 4
    },

    tj_btn: {
        fontFamily: 'FcIconFont',
        color: 'rgba(0, 0, 0, 0.9)',
        fontSize: 20,
    },

    list_wrap: {
        padding: 12,
        backgroundColor: 'white',
        borderRadius: 8,
        marginHorizontal: 16,
        marginBottom: 16
    },

    item_title: {
        fontSize: 17,
        color: 'rgba(0, 0, 0, 0.9)',
        lineHeight: 26,
    },

    item_time: {
        fontSize: 12,
        color: 'rgba(0, 0, 0, 0.5)',
        lineHeight: 18,
        marginTop: 8
    },

    data_num_wrap: {
        flexDirection: "row",
        alignItems: "center",
        marginTop: 9
    },

    data_time: {
        width: 88,
        flexShrink: 0,
        flexDirection: "row",
        alignItems: "center",
    },

    data_other: {
        width: 80,
        flexShrink: 0,
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
    },

    data_num: {
        flexDirection: "row",
        alignItems: "center",
        flex: 1
    },

    data_icon: {
        fontFamily: 'FcIconFont',
        fontSize: 16,
        color: 'rgba(0, 0, 0, 0.5)',
        marginRight: 3
    },

    data_text: {
        fontSize: 12,
        color: 'rgba(0, 0, 0, 0.5)',
    },

    douYin_wrap: {
        flexDirection: "row",
        alignItems: "center",
        marginTop: 12
    },

    douYin_icon: {
        width: 32,
        height: 32,
        marginRight: 4
    },

    douYin_content: {

    },

    douYin_content_title: {
        fontSize: 14,
        color: 'rgba(0, 0, 0, 0.9)',
        lineHeight: 22
    },

    douYin_content_time: {
        fontSize: 12,
        color: 'rgba(0, 0, 0, 0.5)',
        lineHeight: 18
    },

    item_btn_wrap: {
        marginTop: 16,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
    },

    item_btn: {
        flex: 1,
        height: 40,
        borderWidth: 1,
        borderColor: 'rgba(0, 0, 0, 0.1)',
        borderRadius: 8,
        display: "flex",
        alignItems: "center",
        justifyContent: 'center'
    },

    item_btn1: {
        width: '100%',
        height: 40,
        lineHeight: 40,
        borderRadius: 8,
        marginHorizontal: 8,
    },

    type_menu: {
        paddingHorizontal: 4,
        display: "flex",
        flexWrap: "wrap",
        flexDirection: "row",
    },
    type_menu_item_box:{
        width: '33.33%',
        height: 40,
        marginBottom: 8
    },
    type_menu_item: {
        height: 40,
        lineHeight: 40,
        borderRadius: 8,
        marginHorizontal: 4,
        flex: 1,
    },
    px_type: {
        flexDirection: "row",
        alignItems: "center"
    },


    modal_item_text: {
        marginHorizontal: 16,
        height: 56,
        display: "flex",
        // alignItems: 'center',
        justifyContent: 'center',
        borderBottomColor: 'rgba(0,0,0,0.05)',
        borderBottomWidth: 1,
        fontSize: 17,
        color: 'rgba(0,0,0,0.9)'
    },
    modal_item_pressed: {
        backgroundColor: 'rgba(0,0,0,0.05)'
    },
    module_btn_wrap: {
        flexDirection: "row",
        alignItems: "center",
        height: '100%'
    },
    module_btn: {
        height: 28,
        lineHeight: 28,
        paddingHorizontal: 12,
        borderRadius: 20,
        backgroundColor: '#F1F2F4',
        marginLeft:4,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row"
    },
    module_btn_txt: {
        fontSize: 12,
        color: '#2856FF',
        textAlignVertical: 'center'
    },
    modal_default: {
        width: 280,
        borderBottomRightRadius: 12,
        borderBottomLeftRadius: 12,
    },
    page_bottom: {
        backgroundColor: 'white',
        height: 48,
        paddingHorizontal: 16,
        position: "relative",
    },
    delete_num: {
        lineHeight: 48,
        fontSize: 12,
        color: 'rgba(0,0,0,0.3)'
    },
    delete_btn_wrap: {
        position: "absolute",
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row"
    },
    delete_btn1: {
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row"
    },
    delete_btn: {
        position: "absolute",
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row"
    },
    delete_text: {
        fontSize: 14,
        color: 'rgba(250,81,81,0.3)'
    },
    delete_active: {
        color: 'rgba(250,81,81,1)'
    },
    item_wrap: {
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between",
        minHeight: 56,
        display: 'flex',
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(0,0,0,0.1)',
    },
    item_left: {
        flexDirection: 'row',
        alignItems: "center"
    },
    select_icon: {
        width: 20,
        height: 20,
        borderRadius: '50%',
        borderWidth: 1,
        borderColor: 'rgba(0,0,0,0.5)',
        marginRight: 12,
    },
    select_active: {
        borderColor: '#2856FF',
        backgroundColor: '#2856FF',
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "center"
    },
    item_right: {
        flexDirection: 'row',
        alignItems: "center"
    },
    move_bottom: {
        backgroundColor: 'white',
        height: 48,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: 16
    }
})